<template>
  <a-modal
    v-if="addMemberVisible"
    width="700px"
    :visible="addMemberVisible"
    title="邀请成员"
    ok-text="添加"
    cancel-text="取消"
    centered
    @ok.stop="addMember"
    @cancel.stop="cancelAddMember">
    <AddMemberPage @changeMemberList="changeMemberList"/>
  </a-modal>
</template>

<script lang="ts">
/**
 * modal of adding members
 * @author Huihua Lu
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import ProjectStore from '@/store/modules/project'
import AddMemberPage from '@/components/projects/AddMemberPage.vue'

@Component({
  components: {
    AddMemberPage
  }
})
export default class AuthHeader extends Vue {

  @Prop() projectId!: number

  // 添加的成员列表
  private newMemberList: Array<any> = []

  public get addMemberVisible() {
    return ProjectStore.addMemberModalVisible
  }

  public cancelAddMember(): void {
    ProjectStore.setAddMemberModalVisible(false)
  }

  public changeMemberList(list: Array<any>) {
    this.newMemberList = list
  }

  public async addMember(): Promise<void> {
    const authList: Array<any> = []
    console.log('------',this.newMemberList)

    this.newMemberList.forEach(m => {
      if(m.name!==null && m.role!==null){           // 过滤信息不完整的新成员
        authList.push({
          userId: m.id,
          auth: m.role==='游客'?1:(m.role==='协作者'?2:3)
        })
      }
    })
    if(authList.length>0){
      await ProjectStore.createNewAuth({projectId: this.projectId, userAuths: authList})
    }
    ProjectStore.setAddMemberModalVisible(false)
  }
}


</script>
